<template>
    <el-menu 
        :default-active="activeIndex"
        @select="handlerSelect"
        active-text-color="#399"
        mode="horizontal"
    >
        <el-menu-item
            v-for="(item,index) of navs"
            :key="index"
            :index="index+''"
        >
        {{item.title}}
        </el-menu-item>
    </el-menu>
<!-- <nav>
        <!-- 展示区 相当于vue的router-link 声明式跳转 -->
<!--     
    <nuxt-link to="/index" active-class="app_header--active">首页</nuxt-link>
    <nuxt-link to="/login" active-class="app_header--active">登录</nuxt-link>
    <nuxt-link to="/user" active-class="app_header--active">用户</nuxt-link>
    <nuxt-link to="/goods" active-class="app_header--active">商品</nuxt-link>
</nav> -->
</template>
<script lang="ts">
import {Vue,Component,Watch} from 'vue-property-decorator'
import {Route} from 'vue-router';
type TNavs = {path:string,title:string};
//采用装饰器的方式 装饰一个 vue的组件
@Component
export default class AppHeader extends Vue{
    activeIndex:string ="-1";
    navs:TNavs[]= [
        {path:'/index',title:'首页'},
        {path:'/login',title:'登录'},
        {path:'/user',title:'用户'},
        {path:'/reg',title:'注册'},
        {path:'/goods',title:'商品'},
    ]
    handlerSelect(key:number,keyPath:string):void{
        this.$router.push(this.navs[key].path)
    }
    @Watch('$route',{immediate:true,deep:true})
    onRouteChange(route:Route){
        console.log("....");
        let find = false;
        this.navs.map((item,index)=>{
            //跳转到首页的路由，可以写'/index'，也可以按照现在的对象的方式写
        //  if(item.path="/") this.$router.push({name:'root'})
            if(item.path=="/") this.$router.push('/index')
            if(route.path==item.path){
                console.log("true");
                this.activeIndex = index+'';
                find=true;
            }
        })
        
        if(!find) this.activeIndex='-1';
    }
}
// export default {
//     data(){
//         return{
//             activeIndex:"-1",
//             navs:[
//                 {path:'/index',title:'首页'},
//                 {path:'/login',title:'登录'},
//                 {path:'/user',title:'用户'},
//                 {path:'/reg',title:'注册'},
//                 {path:'/goods',title:'商品'},
//             ]
//         }
//     },
//     methods:{
//         handlerSelect(key,keyPath){
//             this.$router.push(this.navs[key].path);

//         }
//     },
//     watch:{
//         $route:{
//             immediate:true,
//             handler(route){
//                 console.log("....");
//                  let find = false;
//                  this.navs.map((item,index)=>{
//                      //跳转到首页的路由，可以写'/index'，也可以按照现在的对象的方式写
//                     //  if(item.path="/") this.$router.push({name:'root'})
//                      if(item.path=="/") this.$router.push('/index')

//                      if(route.path==item.path){
//                          console.log("true");
//                          this.activeIndex = index+'';
//                          find=true;
//                      }
//                  })
                 
//                 if(!find) this.activeIndex='-1';
//             }
//         }
//     }
// }
</script>
<style scoped>
.app_header--active{
    background: #399;
    color:#fff;
}
</style>